<template>
  <div>
    <div>
      <img src="../assets/img/loan_index.jpg" alt="加载失败">
    </div>
    <div style="margin-top: 30px">
      <serveice-products></serveice-products>
    </div>

    <div v-for="item in list" style="width: 1200px; height: 500px ;border: 1px solid transparent;margin-left: 100px">
      <div>
        <div>
          <div style="float: left"><img src="../assets/img/Triangle.png"/></div>
          <div style="float: left;color: rgb(0, 160, 233);font-size: 22px">
            {{item.title}}
          </div>
        </div>
        <div style="clear: both"></div>
        <div style="width: 330px;float: left;height: 323px;margin-right: 30px">
          <div style="margin-left: 20px">
            <h4 style="color: rgb(102, 102, 102)">{{item.apply1}}</h4>
          </div>

          <div style="font-size: 14px;color: rgb(153, 153, 153);margin-top: 30px">
            <ol>
              <li v-for="lis1 in item.item1"><p>{{lis1.detail}}</p></li>
            </ol>
          </div>
        </div>
        <div style="width: 330px;float: left;height: 323px;margin-right: 30px">
          <div style="margin-left: 20px">
            <h4 style="color: rgb(102, 102, 102)">{{item.apply2}}</h4>
          </div>
          <div style="font-size: 14px;color: rgb(153, 153, 153);margin-top: 30px">
            <ol>
              <li v-for="lis2 in item.item2"><p>{{lis2.detail}}</p></li>
            </ol>
          </div>
        </div>
        <div style="float: left">
          <img :src="item.img"/>
        </div>
      </div>
      <div style="clear: both;"></div>
      <div
        style="width: 150px;height: 50px;text-align: center;line-height: 50px;background: rgb(0, 160, 233);font-size: 26px;cursor: pointer">
        <router-link to="/loan/login" tag="div">
          开户
        </router-link>
      </div>
    </div>

    <div style="clear: both"></div>

    <div style="margin-left: 100px;">
      <div class="service_title">公司简介</div>
      <div style="border-bottom: 1px solid #ccc;width: 1200px;"></div>

      <div style="width: 1200px;height: 200px;margin-left: 100px;margin-top: 50px">
        <div v-for="item in img" style="width: 200px;height: 140px;float: left;margin-right:30px ">
          <div style="width: 84px;height: 140px;float: left;text-align: center">
            <div>
              <img :src="item.img"/>
            </div>
            <p style="font-size: 14px;color: rgb(153, 153, 153);">{{item.title}}</p>
          </div>
          <div style="float: left ;margin-left: 30px">
            <img src="../assets/img/product_point.png"/>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import ServeiceProducts from './page/serviceProduct.vue'

  export default {
    components: {ServeiceProducts},
    name: 'loan',
    data () {
      return {
        list: [
          {
            title: '房贷 / E房贷（2+1）',
            apply1: '申请材料 / APPLICATION MATERIALS',
            apply2: '申请条件 / APPLICATION CONDITIONS',
            img: require('../assets/img/service_loan1.png'),
            item1: [
              {
                detail: '身份证原件（只能为二代身份证原件）  '
              },
              {
                detail: '户口本原件'
              },
              {
                detail: '婚姻证明原件  '
              },
              {
                detail: '房产证原件'
              },
              {
                detail: '提供最近12个月流水  '
              },
              {
                detail: '私营业主／企业主需提供营业执照'
              }
            ],
            item2: [
              {
                detail: '人群：企事业法人、个体工商户及个人'
              },
              {
                detail: '年龄：22～60周岁 '
              },
              {
                detail: '抵押物：商品房、土地、'
              },
              {
                detail: '行业：国家明确禁止的行业禁入'
              }
            ]
          },
          {
            title: 'E房贷',
            apply1: '申请材料 / APPLICATION MATERIALS',
            apply2: '申请条件 / APPLICATION CONDITIONS',
            img: require('../assets/img/service_loan2.png'),
            item1: [
              {
                detail: '身份证原件（只能为二代身份证原件）  '
              },
              {
                detail: '户口本原件'
              },
              {
                detail: '婚姻证明原件  '
              },
              {
                detail: '房产证原件'
              },
              {
                detail: '提供最近12个月流水  '
              },
              {
                detail: '私营业主／企业主需提供营业执照'
              }
            ],
            item2: [
              {
                detail: '人群：企事业法人、个体工商户及个人'
              },
              {
                detail: '年龄：22～60周岁 '
              },
              {
                detail: '抵押物：商品房、土地、'
              },
              {
                detail: '行业：国家明确禁止的行业禁入'
              }
            ]
          },
          {
            title: 'E信贷',
            apply1: '申请材料 / APPLICATION MATERIALS',
            apply2: '申请条件 / APPLICATION CONDITIONS',
            img: require('../assets/img/service_loan3.png'),
            item1: [
              {
                detail: '身份证（本人身份证）'
              },
              {
                detail: '户口本（本人所属户口本）'
              },
              {
                detail: '房产证'
              },
              {
                detail: '工作证明'
              },
              {
                detail: '银行流水'
              },
              {
                detail: '征信报告'
              }
            ],
            item2: [
              {
                detail: '22-55岁中国公民（港澳台地区除外）'
              },
              {
                detail: '信用良好'
              }
            ]
          }
        ],
        img: [
          {
            img: require('../assets/img/product1.png'),
            alt: '图片加载失败',
            title: '选择产品'
          },
          {
            img: require('../assets/img/product2.png'),
            alt: '图片加载失败',
            title: '计算可贷额度'
          },
          {
            img: require('../assets/img/product3.png'),
            alt: '图片加载失败',
            title: '在线申请'
          },
          {
            img: require('../assets/img/product4.png'),
            alt: '图片加载失败',
            title: '等待审核'
          },
          {
            img: require('../assets/img/product5.png'),
            alt: '图片加载失败',
            title: '放款成功'
          }
        ]
      }
    }
  }
</script>

<style lang="scss">
  .clearfix:after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }

  .service_title{
    font-size: 18px;
    border-bottom: 4px solid #009fe9;
    width: 100px;
    height:60px;
    line-height: 60px;
    text-align: center;
  }



</style>
